<template>
  <!-- 人防信息 -->
  <view class="airDefenseSituation">
    <view class="wrapper">
      <view
        class="wrapper_item"
        v-for="item in securityList"
        :key="item.id"
        :data-url="`${item.url}?companyId=${options.companyId}`"
        @click="handleClickRouter"
        :style="{
          background: 'url(' + baseImgUrl + item.bgIcon + ') no-repeat',
          backgroundSize: '100% 100%',
        }"
      >
        <view class="avatar">
          <image class="headImg" :src="baseImgUrl + item.icon"></image>
        </view>
        <view class="anName">
          <view class="title_name">{{ item.name }}</view>
          <view class="an_state">{{ item.caption }}</view>
        </view>
        <view class="perfect"> 查看详情> </view>
      </view>
    </view>
  </view>
</template>

<script>
import {} from "@/api/home.js";
import { handleClickRouter } from "@/utils/util.js";

export default {
  name: "airDefenseSituation",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      options: {},
      securityList: [
        {
          id: 1,
          name: "负责人",
          icon: "civil_icon1.png",
          bgIcon: "civil_bg1.png",
          caption: "",
          url: "/securityInfor/airDefenseSituation/safetyManager",
        },
        {
          id: 2,
          name: "保安人员",
          icon: "civil_icon2.png",
          bgIcon: "civil_bg2.png",
          caption: "人数:",
          url: "/securityInfor/airDefenseSituation/publicSecurity",
        },
        {
          id: 3,
          name: "联防队员",
          icon: "civil_icon3.png",
          bgIcon: "civil_bg3.png",
          caption: "人数:",
          url: "/securityInfor/airDefenseSituation/defensiveLineman",
        },
      ],
    };
  },
  onLoad(options) {
    console.log(options, "什么什么模式吗没事");
    this.options = options;
    this.securityList[0].caption = options.dutyPersonName;
  },
  onShow() {
    let { dutyPersonName, securityStaffCount, jointDefenceCount } =
      uni.getStorageSync("dutyList");
    if (dutyPersonName) {
      this.securityList[0].caption = dutyPersonName;
      this.securityList[1].caption = "人数:" + securityStaffCount + "人";
      this.securityList[2].caption = "人数:" + jointDefenceCount + "人";
    }

    this.getList();
  },
  methods: {
    handleClickRouter,
    getList() {
      // publicSecurityDetail({ companyId: this.options.companyMessageId }).then(
      //   (res) => {
      //     if (res.code == 200) {
      //     }
      //   }
      // );
    },
  },
};
</script>

<style lang="scss" scoped>
.airDefenseSituation {
  flex: 1;
  background: #f9f9f9;

  .wrapper {
    margin: 20rpx;
  }

  .wrapper_item {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;

    .avatar {
      margin-right: 1.5vh;
      border-radius: 130rpx;
      overflow: hidden;
      width: 116rpx;
      height: 116rpx;
      .headImg {
        overflow: hidden;
        width: 116rpx;
        height: 116rpx;
      }
    }

    .anName {
      flex: 1;
      margin-top: 10rpx;
      font-weight: 500;
      color: #ffffff;

      .title_name {
        margin-bottom: 6rpx;
        font-size: 36rpx;
      }

      .an_state {
        font-size: 28rpx;
      }
    }

    .perfect {
      margin-top: 73rpx;
      padding: 0 13rpx;
      font-size: 24rpx;
      min-width: 96rpx;
      height: 35rpx;
      line-height: 35rpx;
      color: #fff;
    }
  }
}
</style>
